<template>
  <div>
    <!-- 父（APP.vue）->子(MyProduct.vue) 
    父组件：在子组件标签上定义属性
    子组件：通过props 接收，接收后，就可以当做 vue 变量使用
    -->

    <!-- 在属性上传入不同的数据 -->
<MyProduct title="鬼市" price='100' info='鬼的市场'></MyProduct>
<MyProduct title="人市" price='1000' info='人的市场'></MyProduct>
<!-- 整个动态属性 -->
<MyProduct :title="title3" :price='600' :info='info3'></MyProduct>
  </div>
</template>

<script>
// 1.引入
import MyProduct from './components/MyProduct.vue'
export default {
  data (){
    return{
      title3:'仙市',
      info3:'蟠桃盛宴'

    }
  },
// 2.局部注册
components:{
  // MyProduct:MyProduct
  // 因为属性名和属性值一样，可简写
  MyProduct
}
}
</script>

<style></style>
